<template>
	<view class="body">
		<view class="head">
			<view class="wrap clearfix">
				<view class="content clearfix">
					<view class="fl leftbox clearfix">
						<text class="iconfont icon-houtui"></text>
						<text class="line"></text>
						<text class="iconfont icon-ziyuan"></text>
					</view>
					<view class="fl centerbox">
						<text class="iconfont icon-sousuo"></text>
						<input class="search" type="text" placeholder="搜索京东商品" />
					</view>
				</view>

			</view>
		</view>
		<view class="slideshow">
			<swiper class="swiper" duration="500" circular="true">
				<swiper-item class="banner" v-for="(item,index1) in info.info[0].imgs" :key="index1">
					<image class="bannerimg" :src="item"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="main">
			<view class="wrap">
				<view class="content clearfix">
					<text class="price">￥<text class="pri">{{before}}</text>.{{after}}</text>
					<view class="sale">
						<text class="iconfont icon-caifu"></text>
						<text class="text">降价提醒</text>
					</view>
				</view>

				<view class="roll">
					<view class="tags">
						<view class="tag">
							满200减50
						</view>
						<view class="tag">
							赠品
						</view>
						<view class="tag">
							优惠套装
						</view>
					</view>
					<view class="text">
						<text>领劵</text><text class="iconfont icon-xiangyou"></text>
					</view>
				</view>
				<view class="bar">
					<view class="left">
						<text class="red">自营</text>
						<view class="subhead">
							<text>{{info.good_name}}</text><text class="sku">{{sku}}</text>
						</view>
					</view>
					<view class="right">
						<text class="iconfont icon-shoucang"></text>
						<text>收藏</text>
					</view>
				</view>
			</view>
		</view>
		<view class="buy">
			<view class="wrap">
				<view class="sku_choose clearfix" @tap="show">
					<text class="text">已选</text>
					<text class="skuChoose1">{{sku}} <text class="number">{{num}}个</text></text>
					<text class="iconfont icon-dian"></text>
				</view>
				<view class="address clearfix">
					<text class="text">送至</text>
					<text class="skuChoose1">四川成都市双流区华阳街道正东下街20号</text>
					<text class="iconfont icon-dian"></text>
				</view>
				<view class="spu clearfix" v-for="(item,index4) in key" :key="key">
					<text class="text">{{item}}</text>
					<text class="skuChoose1">{{val[index4]}}</text>
					<text class="iconfont icon-dian"></text>
				</view>
			</view>
			<view class="express clearfix">
				<view class="left">
					<text class="item" v-for="(item,index2) in address" :key="index2">{{item}}</text>
				</view>
				<text class="iconfont icon-dian"></text>
			</view>
		</view>
		<view class="comment">
			<view class="wrap">
				<view class="detail">
					<text class="title">评价</text>
					<text class="num">2万+</text>
					<text class="good">好评度92%</text>
					<text class="iconfont icon-xiangyou"></text>
				</view>
				<view class="tags">
					<text>清晰度高(154)</text>
					<text>反应超快(124)</text>
					<text>充电快速(124)</text>
					<text>充电快速(124)</text>
					<text>拍摄功能强(94)</text>
					<text>性能一流(78)</text>
				</view>
				<view class="user">
					<image class="userhead" src="../../static/head.jpg" mode=""></image>
					<text class="name">1***苗</text>
					<text class="stars"><text class="star1"></text><text class="star2"></text></text>
					<text class="data">2021-04-05</text>
				</view>
				<view class="message">
					第一次买小米的手机，之前小米智能得东西已经非常多了，这次了解到11
					ultra，觉得他强大了，忍不住买了一台。说说相机，背面简直太霸气了，镜头带上官方保护套不觉得很突兀，也贴了镜头膜，非常好看。系统非常顺畅，拍照强大，上了一张夜景图，iphone和它真的没法比。电池怎么说呢，开着高分辨率，高刷，息屏显示，我觉得5000毫安的电池也不是太耐用，因为各方面的性能都是顶级的，如果想省电，得牺牲掉一点性能。
				</view>
				<scroll-view class="show" scroll-x="true">

					<image src="../../static/xie.jpg" mode=""></image>

					<image src="../../static/xie.jpg" mode=""></image>
					<!-- 	</view><view class="">
						<image src="../../static/xie.jpg" mode=""></image>
					</view><view class="">
						<image src="../../static/xie.jpg" mode=""></image>
					</view><view class="">
						<image src="../../static/xie.jpg" mode=""></image>
					</view><view class="">
						<image src="../../static/xie.jpg" mode=""></image>
					</view><view class="">
						<image src="../../static/xie.jpg" mode=""></image>
					</view> -->
					<image src="../../static/xie.jpg" mode=""></image>
					<image src="../../static/xie.jpg" mode=""></image>
					<image src="../../static/xie.jpg" mode=""></image>
					<image src="../../static/xie.jpg" mode=""></image>
					<image src="../../static/xie.jpg" mode=""></image>
					<image src="../../static/xie.jpg" mode=""></image>
				</scroll-view>
				<view class="more">
					<text>查看全部评价</text>

				</view>

			</view>


		</view>
		<view class="block">

		</view>
		<view class="info">
			<popup-layer ref="popupRef" :direction="'top'">
				<view class=" box">
					<view class="wrap">
						<view class="header clearfix">
							<view class="leftbox fl">
								<image :src="img" mode=""></image>
							</view>
							<view class="rightbox fl">
								<text class="price">￥<text class="pri">{{before}}</text>.{{after}}</text>
								<text>\n</text>
								<text class="details">已选<text class="sku">{{sku}},{{num}}个</text></text>
							</view>
						</view>
						<view class="body">
							<view class="skuBox" v-for="(item,index3) in arr">
								<view class="title">
									{{item.ability}}
								</view>
								<view class="sku clearfix">
									<view class="btn" :class="{checked: check[index3] == index1}"
										@click="checked(index1,index3,item)" v-for="(item2,index1) in item.children " ref="btns"
										:key="index2">
										{{item2}}
									</view>
								</view>
							</view>
							<!-- <view class="title">
								规格
							</view> -->
							<!-- <view class="sku clearfix">
								<view class="btn" :class="{checked:activeIndex==index1}"
									@click="checked(index1,item.sku)" v-for="(item,index1) in edition " ref="btns"
									:key="index1">
									{{item.sku}}
								</view>
							</view> -->
							<view class="num clearfix">
								<text class="count">数量</text>
								<view class="ipt clearfix">
									<text class="fl minus" @click="minus" :class="{gray:num==1}">-</text>
									<input  type="number" v-model="num" @input="inp" class="number fl" />
									<text class="fl plus" :class="{gray:num==200}" @click="plus">+</text>
								</view>
							</view>
						</view>
						<view class="box">
							<view class="affirm" @tap="closes">
								确认
							</view>
						</view>
					</view>
		
				</view>
			</popup-layer>
		</view>
		<view class="foot">
			<view class="wrap clearfix">
			<!-- 	<view class="right">
					<text class="iconfont icon-shoucang"></text>
					<text>收藏</text>
				</view> -->
				<view class="shop ml fl">
					<text class="iconfont icon-shop"></text>
					<text class="title">店铺</text>
				</view>
				<view class="kefu ml fl">
					<text class="iconfont icon-kefu"></text>
					<text class="title">客服</text>
				</view>
				<view class="car ml fl" @click="car">
					<text class="iconfont icon-zuixing-51"></text>
					<text class="title">购物车</text>
				</view>
				<view class="btn fl add" @tap="show">
					加入购物车
				</view>
				<view class="btn fl buy" @tap="show">
					立即购买
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import popupLayer from '../../components/popup-layer.vue';

	export default {
		components: {
			popupLayer
		},
		data() {
			return {
				good_id:0,
				num: 1,
				img: "",
				sku: "",
				price: "",
				before: "",
				after: "",
				activeIndex: 0,
				key:[],
				val:[],
				info: [],
				edition: [],
				title:[],
				arr:[],
				check:[],
				address: ["99元免基础运费", "京东发货&售后", "7天无理由退货", "京准达", "211限时达", "京尊达", "预约送货", "部分收货", "送货上门", "365天原厂维修",
					"免举证退换货", "自提"
				]
			}
		},
		methods: {
			upper: function(e) {
				// console.log(e)
			},
			lower: function(e) {
				// console.log(e)
			},
			scroll: function(e) {
				// console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			pri() {
				// console.log(this.price.split("."))
				let arr = (this.price.split("."))

				if (arr.length == 1) {
					this.before = this.price
					this.after = "00"
				} else {

					this.before = arr[0]
					this.after = arr[1]
				}

			},

			show() {
				// boolShow = true
				// console.log(123)
				// console.log(this.$refs.popupRef)
				this.$refs.popupRef.show(); // 或者 
			},
			close() {
				// boolShow = false
				this.$refs.popupRef.close(); // 或者 boolShow = false
			},
			closes(){
				let money=this.num*this.price
				// console.log(typeof(money))
				// console.log(wx.getStorageSync("token"))
				uni.request({
					url: 'http://api_devs.wanxikeji.cn/api/shoppingCarAddModify',
					method: 'POST',
					data: {
						token: wx.getStorageSync("token"),
						good_id:this.good_id,
						num:this.num,
						price:this.price,
						money:money,
						sku:this.sku
						
					},
					success: (res) => {
						console.log(res.data.msg)
					}
				})
			},
			checked(index1,index3,item) {
				this.check[index3]=index1
				this.sku=""
				for(let i=0;i<this.arr.length;i++){
					this.sku=this.sku+"+"+ this.arr[i].children[this.check[i]]
				}
				this.sku=this.sku.substr( 1);
				for (let i = 0; i < this.edition.length; i++) {
					if (this.edition[i].sku == this.sku) {
						this.img = this.edition[i].pic;
						this.price = this.edition[i].price;
					}
				}
				this.num=1
				this.pri()
				this.$forceUpdate();
			},
			car(){
				uni.navigateTo({
					url:'../shoppingCart/shoppingCart'
				})
			},
			minus() {
				this.num--
				// console.log(12)
			if(this.num<1) {
					this.num = 1
				}
			},
			plus() {
				this.num++
				if (this.num > 200) {
					this.num = 200
				} 
			},
			inp() {
				console.log(this.num)
				if (this.num > 200) {
					setTimeout(()=>{
					this.num = 200
					},0)
				}
				if(this.num <1&&this.num==''){
					setTimeout(()=>{
					this.num = 1
					},0)
				}
			}

		},
		onLoad(option) {
			this.good_id=option.good_id
			console.log(option)
			uni.request({
				url: 'http://api_devs.wanxikeji.cn/api/goodInfo',
				method: 'POST',
				data: {
					good_id: this.good_id
				},
				success: (res) => {
					// console.log(JSON.parse(res.data.data.info[0].info))
					this.info = res.data.data
					console.log(this.info)
					for (let i = 0; i < this.info.info.length; i++) {
						this.info.info[i].colour = JSON.parse(this.info.info[i].colour)
						this.info.info[i].edition = JSON.parse(JSON.parse(this.info.info[i].edition))
						this.info.info[i].imgs = JSON.parse(this.info.info[i].imgs)
						this.info.info[i].info = JSON.parse(this.info.info[i].info)
					}
					this.edition = this.info.info[0].edition
					this.sku = this.edition[0].sku
					this.img = this.edition[0].pic
					this.price = this.edition[0].price
					this.pri()
					this.arr=JSON.parse(this.info.info[0].info)[3]
					// console.log(this.arr)
					this.key=JSON.parse(this.info.info[0].info)[0]
					console.log(this.key)	
					this.val=JSON.parse(this.info.info[0].info)[1]
					console.log(this.val)
					
					for(let i=0;i<this.arr.length;i++){
						this.check.push(0)
					}
					// console.log(this.check)
					// console.log(JSON.parse(this.info.info[0]))
				}
			})
		}
	}
</script>

<style scoped>
	.body {
		color: #333333;
		background-color: #F2F2F2;
	}

	.clearfix::after {
		content: "";
		display: block;
		clear: both;
	}

	.wrap {
		width: 94%;
		margin: 0 auto;
	}

	.head {
		width: 100%;
		/* height: 50px; */
		position: fixed;
		top: 0;
		z-index: 10;
	}

	.content {
		padding-top: 48rpx;
	}

	.fl {
		float: left;
	}

	.head .leftbox {
		position: relative;
		height: 56rpx;
		border: 1px solid #ECECEC;
		border-radius: 60rpx;
		padding: 0 15rpx;
		background-color: rgba(255, 255, 255, .6);
	}

	.head .leftbox .iconfont {
		font-size: 40rpx;
		color: #000000;
		font-weight: 700;
		line-height: 60rpx;
	}

	.head .leftbox .icon-ziyuan {
		margin-left: 20rpx;
		padding-right: 10rpx;
	}

	.head .leftbox .icon-houtui {
		margin-right: 14rpx;
	}

	.head .leftbox .line {
		position: absolute;
		display: inline-block;
		width: 1rpx;
		height: 40rpx;
		margin-top: 10rpx;
		background-color: #ECECEC;
	}

	.centerbox {
		margin-left: 60rpx;
		position: relative;
		background-color: rgba(255, 255, 255, .6);
		border-radius: 60rpx;
	}

	.head .centerbox .icon-sousuo {
		position: absolute;
		top: 14rpx;
		left: 20rpx;
		font-weight: 700;
		color: #8D8D8D;
	}

	.search {
		width: 200rpx;
		height: 56rpx;
		border: 1px solid #ECECEC;
		border-radius: 60rpx;
		/* padding: 0rpx 40rpx; */
		padding-left: 60rpx;
		font-size: 30rpx;
	}

	.foot {

		position: fixed;
		width: 100%;
		bottom: 0;
		height: 100rpx;
		border-top: 1px solid #F0F0F0;
		background-color: #fff;
		z-index: 10;
	}

	.foot .title {
		display: inline-block;
		/* margin-top: -10rpx; */
		font-size: 22rpx;
		line-height: -20rpx;
	}

	.foot .ml:first-child {
		margin-left: 0;
	}

	.foot .ml {
		margin-left: 50rpx;
		margin-top: 45rpx;
		text-align: center;
		/* width: 26rpx; */

		/* word-break:break-all; */
	}

	.fl {
		float: left;
	}

	.clearfix::after {
		content: "";
		display: block;
		clear: both;
	}
	.foot .ml{
		position: relative;
	}
	.foot .fl .iconfont::before {
		position: absolute;
		top: -30rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 40rpx;
	}

	.foot .shop .icon-shop {
		color: #F3270C;
	}

	.foot .fl .icon-zuixing-51 {
		/* font-size: 50rpx; */
		font-weight: 700;
	}

	.foot .btn {
		display: inline-block;
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		font-size: 26rpx;
		font-weight: 700;
		text-align: center;
		border-radius: 100rpx;
		color: #fff;
		margin-top: 20rpx;
		margin-left: 40rpx;
	}

	.foot .add {
		background-color: #FFBF0F;
	}

	.foot .buy {
		background-color: #F11C0C;
	}

	.slideshow {
		width: 100%;
	}

	.slideshow .banner {
		width: 100%;
		height: 600rpx;
	}

	.slideshow .banner .bannerimg {
		height: 600rpx;
		width: 100%;
	}

	swiper {
		height: 600rpx;
	}

	swiper-item {
		height: 600rpx;
	}

	.popup-content {
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;
	}

	.info .box {
		display: inline-block;
		width: 100%;
		height: 1100rpx;
		background-color: #FFFFFF;
	}

	.info .sku .btn {
		display: inline-block;
		padding: 0 36rpx;
		min-width: 40rpx;
		max-width: 540rpx;
		overflow: hidden;
		height: 60rpx;
		line-height: 60rpx;
		float: left;
		text-align: center;
		margin-left: 24rpx;
		margin-bottom: 20rpx;
		font-size: 22rpx;
		color: #262626;
		background: #f2f2f2;
		border-radius: 30rpx;
	}

	.info .sku .checked {
		background: #fcedeb;
		border: 1px solid #f2270c;
		padding: 0 32rpx !important;
		font-size: 22rpx;
		color: #f2270c;
		font-weight: 700;
		height: 56rpx;
	}

	.info .header {
		margin-top: 100rpx;
	}

	.info .header .rightbox {

		margin-top: 150rpx;
		margin-left: 60rpx;

	}

	.info .header .price {
		font-size: 24rpx;
		color: #f2270c;
		height: 40px;
		line-height: 40px;
	}

	.info .header .pri {
		font-size: 48rpx;
	}

	.info .header image {
		margin-left: 20rpx;
		width: 200rpx;
		height: 260rpx;
	}

	.info .details {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 28rpx;
		color: #8c8c8c;
	}

	.info .details .sku {
		color: #333;
		margin-left: 20rpx;
	}

	.info .title {
		font-size: 26rpx;
		color: #262626;
		margin: 0 36rpx;
		font-weight: 700;
		height: 80rpx;
		line-height: 80rpx;
	}

	.info .num {
		padding: 32rpx 36rpx;
		font-size: 26rpx;
	}

	.info .num .count {
		color: #262626;
		height: 62rpx;
		line-height: 62rpx;
		font-weight: 700;
		float: left;

	}

	.info .body {
		max-height: 220px;
		padding-bottom: 70px;
		overflow: auto;
		background-color: #fff;
	}

	.info .num .number {

		width: 60rpx;
		color: #333;
		background: #fff;
		text-align: center;
		border: none;
		font-size: 11px;
		background: #f2f2f2;
	}

	.info .ipt {
		display: inline-block;
		float: right;
		margin-right: 30rpx;
	}

	/* .info .box{
		background-color: #fff;
		    width: 100%;
		  
		    padding: 6px 0 6px 18px;
		    box-sizing: border-box;
			
	} */
	.info .affirm {
		justify-content: center;
		height: 38px;
		background-image: linear-gradient(135deg, #f2140c, #f2270c 70%, #f24d0c);
		line-height: 1;
		border-radius: 21px;
		box-shadow: 0 3px 6px 0 rgb(255 65 66 / 20%);
		color: #fff;
		font-size: 13px;
		font-weight: 700;
		text-align: center;
		align-items: center;
		-webkit-box-pack: center;
		flex-direction: column;
		display: flex;
	}

	.main {
		background-color: #fff;
		border-bottom-left-radius: 40rpx;
		border-bottom-right-radius: 40rpx;
		padding-bottom: 20rpx;
	}

	.buy,
	.comment {
		margin-top: 40rpx;
		background-color: #fff;
		border-radius: 40rpx;

	}

	.block {
		height: 100rpx;
	}

	.main .price {
		font-size: 32rpx;
		line-height: 60rpx;
		color: #f2270c;
		display: inline-block;
	}

	.main .pri {
		font-size: 60rpx;
	}

	.main .content {
		padding-top: 30rpx;

	}

	.main .content .sale {

		float: right;
		margin-right: 20rpx;
		margin-top: 20rpx;

		/* float: right; */
		/* margin-right: 50rpx; */
		display: inline-block;
		text-align: center;
		width: 100rpx;

		font-size: 22rpx;
		position: relative;
		text-align: center;
	}

	.main .sale .icon-caifu::before {
		position: absolute;
		top: -30rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 40rpx;
	}

	.main .sale .text {
		font-size: 22rpx;
	}

	.main .roll {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.main .roll .tags {
		display: inline-block;
	}

	.main .roll .tag {
		display: inline-block;
		font-size: 22rpx;
		margin-left: 10rpx;
		color: #f2270c;
		padding: 4rpx 6rpx;
		background-color: #fcedeb;
	}

	.main .roll .text {
		color: #f2270c;
		font-size: 22rpx;
		line-height: 52rpx;
		margin-right: 20rpx;
	}

	.main .roll .icon-xiangyou {
		font-size: 24rpx;
		font-weight: 700;
	}

	.main .bar {
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.main .bar .left {
		width: 70%;
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}

	.main .bar .right {
		position: relative;
		font-size: 22rpx;
		margin-right: 20rpx;
		margin-top: 20rpx;
	}

	.main .right .icon-shoucang::before {
		position: absolute;
		top: -30rpx;
		left: 50%;
		transform: translateX(-50%);
		font-size: 40rpx;
	}

	.main .left .subhead {
		font-size: 28rpx;
		font-weight: 700;
		display: inline-block;
		margin-left: 10rpx;
	}

	.main .left .sku {
		margin-left: 20rpx
	}

	.main .bar .red {
		display: inline-block;
		padding: 4rpx 4rpx;
		background-color: #F41F0F;
		border-radius: 10rpx;
		color: #fff;
		font-size: 20rpx;
	}

	.buy .sku_choose,
	.buy .address ,
	.buy .spu{
		background: #fff;
		padding: 18px 0;
		/* position: relative; */
		font-size: 13px;
	}

	.buy .address,
	.buy .spu{
		border-top: 1px solid #F2F2F2;

	}

	.buy .sku_choose .text,
	.buy .address .text,
	.buy .spu .text{
		float: left;
		/* position: absolute; */
		/* top: 50%; */
		/* left: 0; */
		/* -webkit-transform: translateY(-50%); */
		/* transform: translateY(-50%); */
		width: 35px;
		color: #262626;
		font-weight: 700;
	}

	.buy .sku_choose .skuChoose1,
	.buy .address .skuChoose1,
	.buy .spu .skuChoose1
		{
		/* position: absolute; */
		float: left;
		font-size: 13px;
		color: #333;
		margin-left: 20rpx;
		/* line-height: 22px; */

	}

	.buy .skuChoose1 .number {
		margin-left: 20rpx;
	}

	.buy .icon-dian {
		float: right;
		margin-right: 30rpx;
		/* position: absolute; */
	}

	.express {
		padding: 9px 18px;
		/* margin: 0 -18px; */
		background-color: #fafafa;
		position: relative;
	}

	.express .left {
		float: left;
		display: inline-block;
		position: relative;
		color: #262626;
		font-size: 12px;
		padding-right: 20px;
	}

	.express .left .item {
		padding: 3px 12px 3px 0;
		display: inline-block;
		line-height: 1;
		color: #8c8c8c;
	}

	.express .left .item::before {
		content: "";
		display: inline-block;
		vertical-align: middle;
		margin-top: -2px;
		margin-right: 6px;
		width: 11px;
		height: 11px;
		background: url(../../static/logo.png) no-repeat;
		background-size: 11px auto;
	}

	.express .icon-dian {
		position: absolute;
		top: 30rpx;
		right: 20rpx;
		/* margin-right: 30rpx; */
	}

	.comment .detail {
		position: relative;
		height: 45px;
		line-height: 45px;
		color: #262626;
		padding-left: 8px;
		margin-top: 3px;
		padding: 0 10px;
		display: block;
		font-size: 12px;
	}

	.comment .detail::before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		transform: translateY(-50%);
		width: 3px;
		height: 15px;
		background-image: linear-gradient(180deg, #f5503a, #fad1cb);
	}

	.comment .detail .title {
		font-size: 15px;
		color: #262626;
		font-weight: 700;
	}

	.comment .detail .num {
		font-size: 12px;
		position: absolute;
		height: 45px;
		top: 3px;
		left: 45px;
		line-height: 45px;
	}

	.comment .detail .good {
		font-size: 12px;
		position: absolute;
		height: 45px;
		line-height: 45px;
		top: 0;
		color: #8c8c8c;
		right: 15px;
	}

	.comment .detail .icon-xiangyou {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 0;
		color: #8c8c8c;
	}

	.comment .tags {
		position: relative;
	}

	.comment .tags text {
		display: inline-block;
		margin: 0 5px 5px 0;
		padding: 0 10px;
		height: 30px;
		border-radius: 15px;
		line-height: 30px;
		font-size: 11px;
		color: #262626;
		background: #fcedeb;
	}

	.comment .user {
		line-height: 20px;
		position: relative;
	}

	.comment .user .userhead {
		position: absolute;
		top: 4rpx;
		left: 4rpx;
		width: 20px;
		height: 20px;
		border-radius: 50%;
	}

	.comment .user .name {
		margin-left: 60rpx;
		display: inline-block;
		color: #262626;
		max-width: 8.2em;
		vertical-align: middle;
		font-size: 12px;
	}

	.comment .stars {
		position: relative;
		display: inline-block;
		width: 56px;
		height: 10px;
		margin: -2px 0 -2px 6px;
		vertical-align: middle;
	}

	.comment .star1::before,
	.comment .star1::after,
	.comment .star2::before,
	.comment .star2::after {
		display: inline-block;
		content: "";
		position: absolute;
		top: 0;
		width: 10px;
		height: 10px;
		margin-right: 2px;
		background-size: cover;
		background-image: url(../../static/下载.png);
	}

	.comment .star1::before {
		left: 0;
	}

	.comment .star1::after {
		left: 11px;
	}

	.comment .star2::before {
		left: 23px;
	}

	.comment .star2::after {
		left: 36px;
	}

	.comment .user .data {
		float: right;
		color: #999;
		margin-right: 20rpx;
		font-size: 12px;
	}

	.comment .show image {
		width: 80px;
		height: 80px;
		display: inline-block;
		margin-right: 6px;
		border-radius: 6px;

	}

	.comment .message {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		position: relative;
		line-height: 1.5;
		font-size: 13px;
		margin: 18px 0;
		word-break: break-all;
		overflow: hidden;
		white-space: normal;
		max-height: 126px;
	}

	scroll-view {
		white-space: nowrap;
		width: 100%;
		margin-top: 20rpx;
	}

	.comment .more {
		text-align: center;
		padding: 20px 0;
	}

	.comment .more text {

		height: 25px;
		line-height: 25px;
		font-size: 12px;
		text-align: center;
		color: #262626;
		padding: 2px 5px 2px 10px;

		/* padding-bottom: 18px; */
		border: 1px solid #ddd;
		border-radius: 25px;
	}

	.minus {
		display: inline-block;
		width: 26rpx;
		height: 20rpx;
		margin-left: 10rpx;
		/* margin-top: 6rpx; */
	}

	.plus {
		display: inline-block;
		width: 40rpx;
		height: 20rpx;
		margin-left: 18rpx;
	}

	.gray {
		color: rgba(0, 0, 0, .2);
	}
</style>
